.ant-layout {
    height: 100%;
}

.header {
    padding: 0;
}

.logo {
    width: 200px;
    height: 60px;
    background: url('~@/assets/logo.png') no-repeat center / 160px auto;
}

.layout-content {
    overflow-y: auto;
}

.user-info {
    position: absolute;
    right: 0;
    top: 0;
    padding-right: 20px;
    color: #fff;
}

.user-name {
    margin-right: 100px;
    color: #fff;
}

.user-logout {
    display: inline-block;
    cursor: pointer;
}

.ant-layout-header {
    padding: 0 !important;
}

.personinfo {
    width: 95%;
    height: 250px;
    margin: 20px auto;
    border: 1px solid rgb(164, 164, 164);
    border-radius: 5px;
}

.persondetail {
    position: relative;

    .user-avatar {

        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 10px 20px
    }

    .userinfo {
        position: absolute;
        left: 135px;
        top: 30px;

        span {
            display: block;
            margin-bottom: 10px;
        }
    }

    .user-nikname {
        font-weight: bold;
    }

    .user-introduction {
        color: gray;
    }

    .usesex {
        position: absolute;
        left: 135px;
        top: 85px;
        font-weight: bold;
    }
}

.user-activeinfo {
    margin-top: 55px;
    margin-left: 75px;
  
}
.user-detailinfo{
    display: inline;
    margin-right: 20px;
    font-size: 16px;
 }
.infonumber{
    padding-left: 10px;
    font-weight: bold;
}
.info-boder{
    padding-left: 10px;
    font-weight: normal;
    color: gray;
}
.user-detailinfo:last-child{
    margin-left: 200px;
} 
.info-box{
    width: 95%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 65% 33%;
    grid-column-gap: 2%;
    height: 500px;
}
.info-tab{
    border: 1px solid rgb(164, 164, 164);
    border-radius: 5px;
}
.tab-function{
    margin-left: 30px;
}
.info-reserve{
    border: 1px solid rgb(164, 164, 164);
    border-radius: 5px;
}